// 加载弹出层模块
let layer = layui.layer;

// ---------------------- 切换两个盒子 -------------------------
$('.login a').on('click', function () {
  $('.login').hide().next().show();
})

$('.register a').on('click', function () {
  $('.login').show().next().hide();
})

// ---------------------- 注册功能 -------------------------
// 表单提交事件 -> 阻止默认行为 -> 收集输入框的值 -> ajax提交给接口
$('.register form').on('submit', function (e) {
  e.preventDefault();
  // 使用jQuery中的 $('form').serialize() 方法，快速收集值
  // serialize() 根据表单项的 name 属性收集值的。
  // 接口文档要求，需要提交username和password两个参数，
  // 所以修改用户名的name="username"
  // 所以修改密码框的name="password"
  // 所以删除确认密码的name属性
  let data = $(this).serialize();
  // console.log(data); // username=aaa&password=bbb
  $.ajax({
    type: 'POST',
    url: '/api/reguser',
    data: data,
    success: function (res) {
      // console.log(res)
      // 无论成功，还是失败，都给提示
      // alert(res.message);
      layer.msg(res.message);
      // 如果注册成功
      if (res.status === 0) {
        // 1. 清空输入框(reset()是DOM方法，所以要把jQuery对象转成DOM对象)
        $('.register form')[0].reset();
        // 2. 切换到登录的盒子，去登录
        $('.login').show().next().hide();
      }
    }
  });
})


// ---------------------- 自定义验证规则 -------------------------
// 1. 必须加载 layui的模块，原则是用到什么模块，就加载什么模块
// 语法：let 变量 = layui.模块名
let form = layui.form;
// 自定义验证规则，调用 form 里面的 verify 方法。
form.verify({
  // 键（验证规则）: 值（验证方法）

  // 1. 值为数组，比如 len: ['正则表达式', '验证不通过时的提示']
  len: [/^\S{6,12}$/, '密码长度必须是6~12位，而且不能有空格~~~'], // 坑，注意是 {6,12} 不是 {6, 12}

  // 2. 值为函数，1）函数的形参表示使用验证规则的输入框的值；2）return的是验证不通过时的提示
  same: function (val) {
    // 因为 确认密码 使用了这个验证规则，所以形参 val 表示我们输入的 确认密码
    // 现在确认密码就是val，还需要手动获取密码的值，然后才能进行比较
    if (val !== $('.pwd').val()) {
      return '两次密码不一样~~~'
    }
  }
});


// ---------------------- 完成登录功能 -------------------------
// ；表单提交 -> 阻止默认行为 -> 收集表单中的值 -> Ajax提交给接口
$('.login form').on('submit', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  // console.log(data); // username=aaa&password=bbb
  $.ajax({
    type: 'POST',
    url: '/api/login',
    data: data,
    success: function (res) {
      // console.log(res);
      if (res.status === 0) {
        // 登录成功，把token保存到本地存储，备用
        localStorage.setItem('token', res.token);
        // 登录成功，给出提示后，在跳转
        layer.msg(res.message, { time: 2000 }, function () {
          // 登录成功，跳转到 index.html 
          location.href = './index.html';
        });
      } else {
        // 失败，都给出提示
        layer.msg(res.message);
      }
    }
  })
})